<template>
    <div class="hotel">
        <div v-if="titleType" class="title">
            <div class="back" @click="router.go(-1)"></div>
            <div class="collection-forwarding">
                <div class="collection"></div>
                <div class="forwarding"></div>
            </div>
        </div>
        <div v-if="!titleType" class="title1">
            <div class="back" @click="router.go(-1)"></div>
            <div class="collection-forwarding">
                <div class="collection"></div>
                <div class="forwarding"></div>
            </div>
        </div>

        <div class="banner">
            <!-- 轮播 -->
            <van-swipe height="180">
                <van-swipe-item v-for="(item, index) in HotelDetails.data.shopPhotoAlbumList">
                    <img class="auto-img" :src="item.photoUrl" alt="">
                </van-swipe-item>
                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
            <!-- 酒店信息 -->
            <div class="Information">
                <p>{{ HotelDetails.data.hotelInfoDto
                        .shopName
                }}</p>
                <ul>
                    <li>LOL特权</li>
                    <li v-for="(item, index) in HotelDetails.data.hotelFeaturesList">{{ item.lableName }}</li>
                </ul>
                <div class="facilities">
                    <div class="facilities-text">{{ HotelDetails.data.hotelInfoDto.openTime }} |
                        <span v-for="(item, index)  in HotelDetails.data.hotelFacilitiesAndServicesList">
                            {{ item.lableName }} |
                        </span>
                    </div>
                    <span>设施/详情</span>
                </div>
                <div class="address">
                    <div class="address-left">{{ HotelDetails.data.hotelInfoDto.address }}</div>
                    <div class="address-right">
                        <div class="address-right-item">
                            <div class="address-right-icon">
                                <img class="auto-img" src="@/assets/icon/6A.png" alt="">
                            </div>
                            <div class="address-right-name">地图</div>
                        </div>
                        <div class="address-right-item">
                            <div class="address-right-icon">
                                <img class="auto-img" src="@/assets/icon/SK.png" alt="">
                            </div>
                            <div class="address-right-name">电话</div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <!-- 选择日期 -->
        <div class="selectTime" @click="show = true">
            <div class="selectTime-left">{{ mm }}月{{ dd }}日 <span>{{ week }}</span></div>
            <div class="selectTime-InAll">{{ (selectdd - dd) }}晚</div>
            <div class="selectTime-right">{{ (mm) }}月{{ selectdd }}日 <span>{{ selectweek }}</span></div>
        </div>
        <!-- 选择日期-日期列表 -->
        <van-calendar v-model:show="show" type="range" @confirm="onConfirm" />
        <!-- 类型列表 -->
        <div class="hotelType">
            <ul>
                <li v-for="(item, index) in roomList.list" :key="index">
                    <div class="hotel-img">
                        <img v-if="item.listImage != ''" class="auto-img1" :src="item.listImage" alt="">
                        <img v-else class="auto-img" src="@/assets/background/9o.png" alt="">
                    </div>
                    <div class="hotel-text">
                        <p>{{ item.roomTypeName }}</p>
                        <div>{{ item.cpu }}{{ item.gpu }}{{ item.ram }}</div>
                        <div>{{ item.area }} | {{ item.hasWindow }} | {{ item.bedNum }}</div>
                        <div class="ConfirmOrder">
                            <div class="ConfirmOrder-text">
                                <div class="delayrefund">
                                    <div class="delayrefund-item" v-for="value in item.roomTypeWelfareList">{{
                                            value.lableName
                                    }}</div>
                                </div>
                                <p>18:00前可免费取消</p>
                            </div>
                            <div class="ConfirmOrder-buy">
                                <span class="rmb">￥</span>
                                <span class="pirce">{{ item.leastMoney.toString().slice(0, -2) }}</span>
                                <span class="ding" @click="goDetailsOrder(item,item.leastMoney.toString().slice(0, -2))">订</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getHotelDetails, getHotelRoom } from '@/api/api'
import type { HotelDetailsType, roomListType } from '@/tsList/homeFunts'
import { showLoadingToast } from 'vant';

//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useAdmin } from "@/stores/counter"

//使用pinia
const store = useAdmin()  //使用公开的方法
let { userData } = storeToRefs(store)  //拿到方法里定义的值

const router = useRouter()
const route = useRoute()
let kk = JSON.parse(JSON.stringify(route.query.commonCode))

// title的标题切换
const titleType = ref(true)

//记录页面滚动
let oldScrollTop: number = 0; // 记录上一次滚动结束后的滚动距离
const scrollTop = ref<number>(0); // 记录当前的滚动距离
const scrollFixedStatus = ref<boolean>(true);

function handleScroll() {
    window.addEventListener('scroll', () => {
        scrollTop.value = window.scrollY;
    });
}

//日期选择
const date = ref('');
const show = ref(false);

const formatDate = (date: any) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (values: any) => {
    const [start, end] = values;
    show.value = false;
    date.value = `${formatDate(start)} 至 ${formatDate(end)}`;
    dd.value = Number(formatDate(start).slice(3, 5))
    selectdd.value = Number(formatDate(end).slice(3, 5))
};


//时间
// 当前时间
const nn = ref(0)
const mm = ref(0)
const dd = ref(0)
const week = ref('')
const nowTime = ref('')
//选择几日时间
const selectdd = ref(0)
const selectweek = ref('')
const toTime = ref('')

const roomList = reactive<{ list: Array<roomListType> }>({
    list: []
})
const HotelDetails = reactive<{ data: HotelDetailsType }>({
    data: {
        hotelFacilitiesAndServicesList: [],
        hotelFeaturesList: [],
        hotelInfoDto: {
            address: '',
            checkInTime: '',
            checkOutTime: '',
            commonCode: '',
            memberOutTime: '',
            mobile: '',
            openTime: '',
            picNum: 0,
            shareImage: '',
            shopLat: '',
            shopName: '',
            shoplng: '',
            storeState: 0,
            sysAutoTime: '',
            targetDistance: 0,
        },
        hotelPrivilegesList: [],
        hotelSpecialActivity: '',
        otherPoliciesList: [],
        policiesShowAllFlag: true,
        reservationMustReadList: [],
        serviceShowAllFlag: true,
        shopPhotoAlbumList: []
    }
})


function goDetailsOrder(item: object,price:string) {
    let num = Number.parseInt(price)

    //不能传对象，先转化成字符串，拿的时候记得转回来
    let ryrzDetails = JSON.stringify(item)

    
    // let lastname = eval("("+localStorage.getItem("userInfo")+")")
    if (localStorage.getItem("userInfo")) {
        //总价
        let totalPrice = (selectdd.value - dd.value) * num

        router.push({
            //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
            path: '/DetaisOrder',
            query: {
                mm: mm.value,
                dd: dd.value,
                week: week.value,
                selectdd: selectdd.value,
                selectweek: selectweek.value,
                room: ryrzDetails,
                name: HotelDetails.data.hotelInfoDto.shopName,
                hotelPrice: totalPrice 
            }
        })
    } else {
        showLoadingToast({
            message: '请先登陆...',
            forbidClick: true,
        });
        router.push({
            //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
            path: '/LoginView',
        })
    }

}

watch(
    () => scrollTop.value,

    (newValue, oldValue) => {
        setTimeout(() => {
            if (newValue === window.scrollY) {
                // 延时执行后当newValue等于window.scrollY，代表滚动结束
                // console.log('滚动结束');
                oldScrollTop = newValue; // 每次滚动结束后都要给oldScrollTop赋值
                // scrollFixedStatus.value = true;
                if (scrollTop.value >= 115) {
                    titleType.value = false
                } else {
                    titleType.value = true
                }
            }
        }, 10); // 必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
        if (oldScrollTop === oldValue) {
            scrollFixedStatus.value = false;
            // 每次滚动开始时oldScrollTop与oldValue相等
            // console.log('滚动开始');
        }
    }
);
onMounted(() => {

    handleScroll();

    let aData = new Date();
    nn.value = aData.getFullYear()
    mm.value = aData.getMonth() + 1
    dd.value = aData.getDate()
    let wk = new Date().getDay()
    let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    week.value = weeks[wk]

    //当前日期拼接
    nowTime.value = nn.value + '-' + mm.value + '-' + dd.value

    //选定日期，后面选日期后可改
    selectdd.value = dd.value + 1
    selectweek.value = weeks[wk + 1]

    //选定日期拼接
    let addDd = dd.value + 1
    toTime.value = nn.value + '-' + mm.value + '-' + addDd

    getHotelDetails(kk).then((res) => {
        // console.log('获取到的酒店详情', res.data);
        HotelDetails.data = res.data
    })

    getHotelRoom(kk).then((res) => {
        roomList.list = res.data
    })

})

</script>

<style lang="less" scoped>
.custom-indicator {
    position: absolute;
    left: 5px;
    bottom: 25px;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 999px;
    color: white;
    background: rgba(0, 0, 0, 0.1);
}

.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.auto-img1 {
    height: 100%;
    display: block;
}

.hotel {
    min-height: 100vh;

    .title {
        position: fixed;
        height: 40px;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 10px;
        // background-color: black;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99;
        animation: myfirst1 1s;

        .back {
            width: 20px;
            height: 20px;
            background-size: cover;
            background-image: url('@/assets/icon/zf.png');
        }

        .collection-forwarding {
            display: flex;
            align-items: center;

            .collection {
                width: 18px;
                height: 18px;
                background-size: cover;
                background-image: url('@/assets/icon/bai.png');
                margin: 0 10px;
            }

            .forwarding {
                width: 15px;
                height: 15px;
                background-size: cover;
                background-image: url('@/assets/icon/zm.png');

            }
        }
    }

    .title1 {
        position: fixed;
        height: 40px;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99;
        background-color: white;
        color: black;
        animation: myfirst 1s;

        .back {
            width: 15px;
            height: 15px;
            background-size: cover;
            background-image: url('@/assets/icon/lI.png');
        }

        .collection-forwarding {
            display: flex;
            align-items: center;

            .collection {
                width: 18px;
                height: 18px;
                background-size: cover;
                background-image: url('@/assets/icon/ec.png');
                margin: 0 10px;
            }

            .forwarding {
                width: 15px;
                height: 15px;
                background-size: cover;
                background-image: url('@/assets/icon/6_.png');

            }
        }
    }

    @keyframes myfirst {
        0% {
            top: -20px;
        }

        100% {
            top: 0px;
        }
    }

    @keyframes myfirst1 {
        0% {
            top: 20px;
        }

        100% {
            top: 0px;
        }
    }


    .banner {
        position: relative;

        .Information {
            height: 130px;
            position: absolute;
            bottom: -105px;
            left: 0;
            right: 0;
            margin: 0 10px;
            border-radius: 10px;
            background-color: white;
            padding: 10px 10px;
            font-size: 12px;

            p {
                font-size: 15px;
                font-weight: 600;
                padding: 5px 0;
            }

            ul {
                display: flex;

                li {
                    background-color: #edeeef;
                    border-radius: 2px;
                    margin-right: 5px;
                    transform: scale(.8);
                    transform-origin: 0 0;
                }
            }

            .facilities {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #ddd;
                padding-bottom: 5px;

                .facilities-text {
                    width: 270px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    span {
                        color: black;

                    }
                }

                span {
                    color: #00b7ff;
                }
            }

            .address {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-top: 5px;

                .address-left {
                    width: 270px;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }

                .address-right {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    justify-content: space-between;
                    transform: scale(.8);
                    transform-origin: 30px 0;

                    .address-right-icon {
                        width: 20px;
                        height: 20px;
                        border-radius: 999px;
                        background-color: #f0f2f5;
                    }
                }
            }
        }
    }

    .selectTime {
        // width: 100%;
        height: 35px;
        background-color: white;
        border-radius: 10px;
        margin: 120px 10px 10px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;

        span {
            font-weight: 400;
            font-size: 12px;
            transform: scale(.7);
            color: rgb(146, 146, 146);
        }

        .selectTime-left {
            display: flex;
            align-items: center;
        }

        .selectTime-InAll {
            padding: 0 7px;
            margin: 0 5px;
            font-size: 12px;
            transform: scale(.9);
            color: #909be2;
            border: 1px solid #909be2;
            border-radius: 999px;

        }

        .selectTime-right {
            display: flex;
            align-items: center;
        }
    }

    .hotelType {
        padding: 0 10px;

        ul {

            li {
                height: 110px;
                padding: 10px 10px;
                border-radius: 10px;
                background-color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;

                .hotel-img {
                    width: 65px;
                    height: 85px;
                    overflow: hidden;
                    border-radius: 10px;
                    background-color: black;
                    margin-right: 10px;
                }

                .hotel-text {
                    font-size: 12px;
                    color: rgb(141, 141, 141);
                    flex: 1;

                    p {
                        font-weight: 600;
                        font-size: 14px;
                        color: black;
                    }


                    .ConfirmOrder {
                        display: flex;
                        justify-content: space-between;

                        .ConfirmOrder-text {
                            font-size: 12px;
                            font-weight: 400;

                            .delayrefund {
                                display: flex;
                                align-items: center;

                                .delayrefund-item {
                                    // width: 50px;
                                    height: 20px;
                                    padding: 0 5px;
                                    border-radius: 5px;
                                    border: 1px solid #ddd;
                                    // margin-right: 5px;
                                    transform: scale(.8);
                                    transform-origin: 0 0;
                                }
                            }

                            p {

                                font-size: 12px;
                                font-weight: 400;
                            }
                        }

                        .ConfirmOrder-buy {
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            color: #df6e0f;

                            .rmb {
                                font-size: 12px;
                                margin-top: 15px;
                            }

                            .pirce {
                                font-size: 16px;
                                font-weight: 600;
                                margin-top: 15px;
                            }

                            .ding {
                                width: 35px;
                                height: 35px;
                                border-radius: 8px;
                                background-color: #df6e0f;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-left: 5px;
                                color: white;
                                font-size: 15px;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>